<template>
  <div class="contain" ref="contain">
    <div v-for="item in textList.slice((curPage-1)*pageTotal,curPage*pageTotal)" class="title" :key="item.id">
      <p>
        <a href="#" class="title-top">{{ item.title.substring(0, 100) }}</a>
      </p>
      <a href="#" class="title-bottom">{{ item.text.substring(0, 200) }}</a>
    </div>

    <div class="page-select">
      <PageSelect :page-total="pageTotal" :total="textList.length" @selectPage="handlerPageSelect">
      </PageSelect>
    </div>
  </div>
</template>

<script>
import PageSelect from "@/components/PageSelect";

export default {
  name: "TextList",
  props: {
    textList: {
      type: Array,
    },
    pageTotal: {
      type: Number,
      default: function () {
        return 10;
      }
    }
  },
  components: {
    PageSelect,
  },
  data() {
    return {
      curPage: 1,
    }
  },
  methods: {
    handlerPageSelect(select) {
      console.log(select);
      var count = Math.min(this.textList.length - this.pageTotal * (select - 1), 10);
      this.curPage = select;
      this.$refs.contain.style.height = count * 10 + "%";
      console.log(this.$refs.contain.style.height);
    }
  }
}
</script>

<style scoped>

.contain {
  width: 100%;
  height: 100%;
}

.title {
  /*position: absolute;*/
  /*left: 50px;*/
  /*top: 20px;*/
}

.title-top {
  text-decoration: none;
  font-size: 25px;
  font-weight: bolder;
  color: #212121;
}

.title-bottom {
  font-size: 15px;
  color: #212121;
}

.page-select {
  position: relative;
  top: 10%;
  left: 500px;
  /*margin-left: 10px;*/
}
</style>